<template>
  <div class="numberrange">
    <div class="numberrange__wrapper" :class="{ 'is-focus': isFocus }">
      <input
        class="numberrange__inner"
        autocomplete="off"
        role="spinbutton"
        type="number"
        :max="maxRange"
        :placeholder="placeholderMin"
        :min="minRange"
        :value="min"
        @blur="
          updateMin($event.target.value);
          isFocus = false;
        "
        @focus="isFocus = true"
      />
      <span class="el-range-separator">{{ separator }}</span>
      <input
        class="numberrange__inner"
        autocomplete="off"
        role="spinbutton"
        type="number"
        :max="maxRange"
        :placeholder="placeholderMax"
        :min="minRange"
        :value="max"
        @focus="isFocus = true"
        @blur="
          updateMax($event.target.value);
          isFocus = false;
        "
      />
      <div class="closebox">
        <div
          v-if="clearable && (typeof min == 'number' || typeof max == 'number')"
          class="close"
          @click="clear"
        >
          <el-icon class="close__icon">
            <CircleClose />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CircleClose } from "@element-plus/icons-vue";
export default {
  components: {
    CircleClose
  },
  props: {
    //范围
    minRange: {
      type: Number,
      default: -Infinity
    },
    maxRange: {
      type: Number,
      default: Infinity
    },
    //最小值
    min: {
      type: [Number, String],
      default: null
    },
    //最大值
    max: {
      type: [Number, String],
      default: null
    },
    //占位符
    placeholderMin: {
      type: String,
      default: "最小值"
    },
    placeholderMax: {
      type: String,
      default: "最大值"
    },
    //分隔符
    separator: {
      type: String,
      default: "To"
    },
    //是否可清除
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFocus: false
    };
  },
  methods: {
    updateMin(value) {
      console.log(value);
      if (value || value === 0) {
        if (this.max || this.max == 0) {
          if (value > this.max) {
            this.$emit("update:min", this.limitByRange(value));
            this.$emit("update:max", this.limitByRange(value));
          } else {
            this.$emit("update:min", this.limitByRange(value));
          }
        } else {
          this.$emit("update:min", value);
          this.$emit("update:max", value);
        }
      } else {
        this.$emit("update:min", this.max ? 0 : null);
      }
      this.$emit("change", [this.min, this.max]);
    },
    updateMax(value) {
      if (value || value === 0) {
        if (value < this.min) {
          this.$emit("update:min", this.limitByRange(value));
          this.$emit("update:max", this.limitByRange(value));
          // console.log('min',this.min,'max',this.max);
        } else {
          if (!this.min) {
            this.$emit("update:min", 0);
          }
          this.$emit("update:max", this.limitByRange(value));
        }
      } else {
        console.log("maxnull");
        this.$emit("update:max", null);
      }
      this.$emit("change", [this.min, this.max]);
    },
    limitByRange(value) {
      if (!value && value != 0) return null;
      if (value < this.minRange) {
        return Number(this.minRange);
      } else if (value > this.maxRange) {
        return Number(this.maxRange);
      } else {
        return Number(value);
      }
    },
    clear() {
      this.$emit("update:min", null);
      this.$emit("update:max", null);
    }
  }
};
</script>

<style scoped lang="scss">
.numberrange__wrapper {
  align-items: center;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  padding: 0px 11px;
  transform: translateZ(0);
  transition: var(--el-transition-box-shadow);

  &:hover {
    box-shadow: 0 0 2px var(--el-input-hover-border-color) inset;
  }

  &:hover .close {
    display: flex;
    cursor: pointer;
  }
}

.numberrange__wrapper.is-focus {
  box-shadow: 0 0 0px 1px var(--el-input-focus-border-color) inset;

  .close {
    display: flex;
    cursor: pointer;
  }
}

.el-range-separator {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 5px;
  margin: 0;
  font-size: 14px;
  overflow-wrap: break-word;
  box-sizing: content-box;
  color: var(--el-text-color-primary);
}

.closebox {
  align-items: center;
  justify-content: flex-end;
  color: var(--el-input-icon-color, var(--el-text-color-placeholder));
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: 100%;
  width: 20px;
  display: inline-flex;

  .close {
    height: 100%;
    align-items: center;
    display: none;

    cursor: pointer;

    .close__icon {
      cursor: pointer;
    }
  }
}

.numberrange {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  //width: var(--el-input-width);
  width: 250px;

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input::placeholder {
    color: var(--el-input-placeholder-color);
    font-size: inherit;
  }

  &__inner {
    --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
    background: none;
    border: none;
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    flex-grow: 1;
    font-size: inherit;
    height: var(--el-input-inner-height);
    line-height: var(--el-input-inner-height);
    outline: none;
    padding: 0;
    width: 100%;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: textfield; // firefox
  }
}
</style>
